<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
    <link rel="stylesheet" href="./static/css/typo.css">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/lib/prism/prism.css">
    <link rel="stylesheet" href="./static/lib/tocbot/tocbot.css">
</head>
<body>

    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item animated shake">YoonaMessi</h2>
                <a href="index.html" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="index.html" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="index.html" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="index.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="index.html" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="m-item right item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

<!--    中间内容-->
    <div class="m-container-mini m-padded-tb-big animated fadeIn">
        <div class="ui container">
            <div class="ui top attached segment">
<!--                图标-->
                <div class="ui link list horizontal">
                    <div class="item">
                        <img class="ui avatar image" src="./static/images/image.png">
                        <div class="content"><a href="#" class="ui header m-text-mini">YoonaMessi</a></div>

                    </div>
                    <div class="item">
                        <i class="calendar icon"></i> 2022.1.1
                    </div>
                    <div class="item">
                        <i class="eye icon"></i> 2001
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
<!--                图片-->
                <img src="./static/images/yuxi.png" class="ui fluid image rounded">
            </div>
            <div class="ui attached padded segment">
                <div class="ui segment right aligned basic">
                    <div class="ui orange label">
                        原创
                    </div>
                </div>
                <h2 class="ui center aligned header">人工智能概述</h2>
                <div class="typo typo-selection js-toc-content content m-padded-rl-responsible m-padded-tb-big">
                    <pre><code class="language-css">p { color: red }</code></pre>
                    <pre><code class="language-css">p { color: red }</code></pre>
                    <h2 id="hone">第一章</h2>
                    <p>知乎- 有问题,就会有答案
                        知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 2011 年 1 月正式上线,以「让人们更好地分享知识、经验和见解,找到自己的解答」为品牌使命。知乎凭借认真、...
                        zhihu.com/
                        
                        百度快照
                        发现- 知乎
                        2022年01月12日-知乎媒体每周看点0103～0109 01-10 更新106,501,737 浏览 热门问...
                        知乎- 知乎
                        2013年04月02日-知乎是中文互联网知名的可信赖问答社区,致力于构建一个人人都可以...
                        ...了大概 200 本书,为什么感觉读书的价值还是没有体现出来? - 知乎
                        2017年03月31日-登录知乎,问答干货一键收藏 扫码登录 打开 知乎App 在「我的」页...
                        更多同站结果>
                        为您推荐：知乎手机网页版登录知乎网页版登录知乎收费文章免费阅读
                        知乎官网知乎百度百科知乎手机网页版知乎是什么
                        知乎专栏 - 随心写作,自由表达 - 知乎
                        知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 2011 年 1 月正式上线,以「让人们更好地分享知识、经验和见解,找到自己的解答」为品牌使命。知乎凭借认真、...
                        知乎
                        
                        百度快照
                        该吗? - 知乎

                        2019年10月8日 手机端打开知乎 App 点击「关注」,选择「知乎日报」 右上角点击「置顶」,就可以随时查看知乎日报的最新动态啦~ 你想曝
                    </p>
                    <h2 id="htwo">第二章</h2>
                    <p>知乎- 有问题,就会有答案
                        知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 2011 年 1 月正式上线,以「让人们更好地分享知识、经验和见解,找到自己的解答」为品牌使命。知乎凭借认真、...
                        zhihu.com/
                    </p>
                </div>
                <div class="m-padded-rl-responsible">
                    <div class="ui teal label">C++</div>
                </div>

            </div>
            <div class="ui attached positive message">
<!--                博客信息-->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>作者</li>
                            <li>作者</li>
                            <li>作者</li>
                            <li>作者</li>
                        </ui>
                    </div>
                    <div class="five wide column">
                        <img src="./static/images/image.png" class="ui image right floated rounded bordered" style="width:110px">
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment" id="comment-container">
                <div class="ui orange segment">
<!--                    已留言区-->
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="./static/images/image.png">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">Reply</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="./static/images/image.png">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">Reply</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="./static/images/image.png">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">Reply</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="./static/images/image.png">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">Reply</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="期待您的评论..."></textarea>
                    </div>
                    <div class="ui fields">
                        <div class="ui field m-mobile-wide m-margin-bottom-mini">
                            <div class="ui left icon user input">
                                <i class="user icon"></i>
                                <input class="ui inpute" name="nickname" placeholder="昵称">
                            </div>
                        </div>
                        <div class="ui field m-mobile-wide m-margin-bottom-mini">
                            <div class="ui left icon mail input">
                                <i class="mail icon"></i>
                                <input class="ui inpute" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="ui filed m-mobile-wide m-margin-bottom-mini">
                            <button class="ui orange button m-mobile-wide">
                                <i class="edit icon"></i>发布
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="ui vertical icon buttons m-fixed m-right-bottom">
        <button type="button" class="ui toc button orange" >目录</button>
        <a href="#comment-container" class="ui orange button">留言</a>
        <a href="#" class="ui totop teal button"><i class="chevron up icon"></i></a>
    </div>
    <div class="ui totop-button flowing popup transition hidden">
        回到顶部
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width:200px !important;">
        <ol class="js-toc">

        </ol>
    </div>
<!--    底部-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui divided inverted stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/image.png" class="ui rounded image yuxiimage" alt="" >
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">jldx</a>
                        <a href="#" class="item">jldx</a>
                        <a href="#" class="item">jldx</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">jldx</a>
                        <a href="#" class="item">jldx</a>
                        <a href="#" class="item">jldx</a>
                    </div>

                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p class="m-opacity-mini">这是我的个人博客.....</p>

                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-opacity-mini">Copyright © 2016 -2017 Designed by YoonaMessi</p>
        </div>

    </footer>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="./static/lib/prism/prism.js"></script>
    <script src="./static/lib/tocbot/tocbot.min.js"></script>

<script>
    $('.menu.toggle').click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    });
    tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
  // For headings inside relative or absolute positioned containers within content.
  hasInnerContainers: true,
});
    $('.toc.button').popup({
        popup:$('.toc-container.popup'),
        on:'click',
        position:'left center'
    });
    $('.totop').popup({
        popup:$('.totop-button'),
        position:'left center'
    });
</script>
</body>
</html>